export default function Home() {
  return (
    <div className="grid min-h-screen grid-rows-[20px_1fr_20px] items-center justify-items-center gap-16 p-8 pb-20 font-[family-name:var(--font-geist-sans)] sm:p-20">
      <main className="row-start-2 flex flex-col items-center gap-[32px] sm:items-start">
        <div className="glow-effect relative flex items-center text-center">
          <span
            className="text-shadow font-[family-name:var(--font-geist-mono)] text-6xl md:text-8xl lg:text-9xl"
            // text-shadow: offset-x offset-y blur-radius color;
            /**
            * offset-x（水平偏移量）：指定阴影在水平方向上的偏移距离。正值向右偏移，负值向左偏移。
            * offset-y（垂直偏移量）：指定阴影在垂直方向上的偏移距离。正值向下偏移，负值向上偏移。
            * blur-radius（模糊半径，可选）：定义阴影的模糊程度。值越大，阴影越模糊；值为 0 时，阴影是清晰的。
            * color（颜色，可选）：定义阴影的颜色。如果省略，默认使用当前文字的颜色。
            * 重复上述四个属性，实现多层阴影
            */
            style={{
              WebkitTextStroke: "1px #000",
              textShadow:
                "2px -2px 5px #fff, 2px 2px #999, 10px -10px 8px #808080",
            }}
          >
            NUOSON
          </span>
          <span
            className="font-[family-name:var(--font-geist-mono)] text-2xl md:text-3xl lg:text-4xl"
            style={{ WebkitTextStroke: "1px #000" }}
          >
            .tech
          </span>
          <span className="relative h-6 w-6">
            <img
              src="./favicon.ico"
              alt="icon"
              className="absolute top-[-20] rounded rotating-image"
            />
          </span>
        </div>
        <div className="glow-effect relative flex w-full items-center overflow-hidden text-center">
          <span className="marquee-text font-[family-name:var(--font-geist-sans)] text-xl md:text-2xl">
            coming soon ...
          </span>
        </div>
      </main>
    </div>
  );
}
